<template>
  <div class="todo-footer">
    <label>
      <input type="checkbox" id="isCheck" v-model="isCheck" />
    </label>
    <span>
      已完成 <span id="allComplateTodos" >{{listComplete}}</span> /全部
      <span id="allTodos">{{listAll}}</span>
    </span>
    <button id="removeAllComplate" class="btn btn-danger" @click="filterList">
      清除已完成任务
    </button>
  </div>
</template>

<script>
export default {
  name: "TodoFooter",
  data(){
    return{
      ischeck: false
    }
  },
  props:{
    filterList:Function,
    changAllCheck:Function,
    listAll:Number,
    listComplete:Number
  },
  mounted(){
    console.log(this.listAll);
  },
  computed:{
    isCheck:{
      get(){
        if (this.listAll === this.listComplete && this.listAll > 0 ) {
          return true
        }else{
          return false
        }
      },
      set(newValue){
        this.changAllCheck(newValue)
      }
    }
  }
};
</script>

<style>
</style>